<template>
   <div>
      <div class="logo">
         <div v-if="isCollapse" class="menu-icon">
            <i class="el-icon-loading"></i>
         </div>
         <div v-else class="menu-icon">
            <!--            <i class="el-icon-loading"></i> Listen-->
         </div>
      </div>

      <!--      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse"-->
      <el-menu :default-active="pagedefault" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse"
               unique-opened
               background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
         <el-menu-item index="/"><i class="el-icon-s-home"></i><span slot="title">后台首页</span></el-menu-item>
         <!--         <el-submenu index="1">-->
         <!--            <template slot="title"><i class="el-icon-news"></i><span>内容管理</span></template>-->
         <!--            <el-menu-item-group>-->
         <!--               <el-menu-item index="/crm/articles"><i class="el-icon-document"></i>文章管理</el-menu-item>-->
         <!--               <el-menu-item index="/crm/article_nodes"><i class="el-icon-s-grid"></i>分类管理</el-menu-item>-->
         <!--            </el-menu-item-group>-->
         <!--         </el-submenu>-->
         <el-submenu index="2">
            <template slot="title"><i class="el-icon-s-goods"></i><span>商城管理</span></template>
            <el-menu-item-group>
               <el-menu-item index="/shop/products"><i class="el-icon-s-grid"></i>商品列表</el-menu-item>
               <el-menu-item index="/shop/categories"><i class="el-icon-menu"></i>商品分类</el-menu-item>
               <el-menu-item index="/shop/orders"><i class="el-icon-s-order"></i>订单管理</el-menu-item>
               <el-menu-item index="/shop/users"><i class="el-icon-user-solid"></i>会员管理</el-menu-item>
               <el-menu-item index="/shop/accounts"><i class="el-icon-s-finance"></i>账户管理</el-menu-item>
               <el-menu-item index="/shop/tickets"><i class="el-icon-s-ticket"></i>优惠券</el-menu-item>
               <el-menu-item index="/shop/expresses"><i class="el-icon-star-on"></i>物流管理</el-menu-item>
            </el-menu-item-group>
         </el-submenu>
         <el-submenu index="3">
            <template slot="title"><i class="el-icon-news"></i><span>广告管理</span></template>
            <el-menu-item-group>
               <el-menu-item index="/ad/adverts"><i class="el-icon-document"></i>广告列表</el-menu-item>
               <el-menu-item index="/ad/advert_nodes"><i class="el-icon-s-grid"></i>广告分类</el-menu-item>
            </el-menu-item-group>
         </el-submenu>
         <el-submenu index="4">
            <template slot="title"><i class="el-icon-setting"></i><span>系统管理</span></template>
            <el-menu-item-group>
               <el-menu-item index="/system/configs"><i class="el-icon-s-tools"></i>系统设置</el-menu-item>
            </el-menu-item-group>
         </el-submenu>

      </el-menu>
   </div>
</template>

<script>
   export default {
      name: "Aside",
      data() {
         return {
            isCollapse: false,
            menus: [],
            pagedefault: ""
         }
      },
      created() {
         //监听isCollapse的值
         this.$root.Bus.$on('toggle', value => {
            this.isCollapse = !value
         });
      },
      watch: {
         $route() {
            if (this.$route.meta.parentPath) {
               this.pagedefault = this.$route.meta.parentPath; // 实现路由切换
            }
         }
      },
   }
</script>

<style scoped>
   .logo {
      height: 60px;
      line-height: 60px;
   }

   .menu-icon {
      color: #fff;
      font-size: 25px;
      text-align: center;
   }

   .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 185px;
      min-height: 500px;
   }

</style>